<template>
	<view class="searchDetailContainer">
		<view class="input">
			<input type="text" v-model="seaValue" :placeholder="placeholder" />
			<image src="../../static/images/搜索.png" mode=""></image>
			<button size="mini" type="primary" @click="searchDetail">搜索</button>
		</view>
		<view class="searchLogo" style="text-align: center; font-size: 30upx; line-height: 100upx;">
			药不能停
			<!-- <image src="" mode=""></image> -->
		</view>
		<!-- 导航栏 -->
		<view class="goodsContainer">
			<view class="goodsNav">
				<text>综合</text>
				<text>销量</text>
				<text>价格</text>
				<text>筛选</text>
			</view>
			<!-- 推荐商品 -->
			<view class="goodsItem">
				<view class="goodsItem_left" >
					<image :src="products.results[0].thumbnailUri" mode=""></image>
					<text v-if="products.results[0].searchSlogan">{{ products.results[0].searchSlogan }}</text>
				</view>
				<view class="goodsItem_right">
					<text class="gir_title">{{ products.results[0].productName }}</text>
					<text class="gir_text">规格: {{ products.results[0].packing }}</text>
					<text class="gir_text">厂商: {{ products.results[0].manufacturer }}</text>
					<text class="gir_price">￥ {{ products.results[0].lowestPrice / 100 }} 起</text>
				</view>
				<view class="goodsItem_car" @click="toCart(products.results[0])"><image src="../../static/icon_image/gouwuchekong.png" mode=""></image></view>
			</view>
			<!-- 推荐商品组合及价格计算 -->
			<view class="goodsRecommended">
				<view class="gr_jia" style="width: 40upx; height: 40upx; color: #000000; font-size: 30upx; position: absolute; left: 28%; top: 40%; z-index: 100;">加</view>
				<view class="grTitle">与{{ products.results[0].productName }}的疗程组合</view>
				<!-- 价格相加区域 -->
				<view class="grBox">
					<view class="grBox_image" v-for="(item,index) in combination[0].combinationSkuBos" :key='item.id'>
						<!-- <image src="../../static/images/2.jpg" mode=""></image> -->
						<image :src="`https://img.jianke.com/${item.productImageUrl}`" mode=""></image>
						<text class="gri_name">{{item.skuName }}</text>
					</view>
					<view class="grBox_price">
						<text class="grBox_price_title">商品组合价</text>
						<text class="grBox_price_Num">{{ allPrice }}</text>
						<text class="grBox_price_more">查看更多 ></text>
					</view>
				</view>
				<view class="grEvaluate">
					<text>药师点评:</text>
					<view class="grEvaluate_text">{{ combination[0].doctorReview }}</view>
				</view>
			</view>
			<!-- 更多商品列表 -->
			<view class="goodsItem" v-for="(item, index) in products.results" :key="index">
				<view class="goodsItem_left">
					<image :src="item.thumbnailUri" mode=""></image>
					<text v-if="item.searchSlogan">{{ item.searchSlogan }}</text>
				</view>
				<view class="goodsItem_right">
					<text class="gir_title">{{ item.productName }}</text>
					<text class="gir_text">规格: {{ item.packing }}</text>
					<text class="gir_text">厂商: {{ item.manufacturer }}</text>
					<text class="gir_price">￥ {{ item.lowestPrice / 100 }} 起</text>
				</view>
				<view class="goodsItem_car" @click="toCart(item)"><image src="../../static/icon_image/gouwuchekong.png" mode=""></image></view>
			</view>
		</view>
	</view>
</template>


<script>
import requestT from '../../utils/requestTrue.js';
export default {
	data() {
		return {
			products: {}, //药品数组
			recommends: [], //？
			combination: [] //药品组合推荐
		};
	},
	mounted() {
		let keyword = this.$mp.query.keyword;
		this.getsearchList(keyword);
	},
	methods: {
		async getsearchList(keyword) {
			let result = await requestT('/searchs', { keyword, pn: 1, ps: 10 })
			this.products = result.products;
			this.recommends = result.recommends || [];
			this.combination = Object.values(result.combination); //转换成数组
		},
		// 跳转到购物车
		toCart(item) {
			let shopItem = {
				count: 1,
				selected: true,
				name:item.productName,
				primaryPicUrl: item.thumbnailUri,
				retailPrice: item.ourPrice/100
			};
			this.$store.commit('changeCartList', shopItem);
		}
	},
	computed: {
		// 计算推荐组合总价
		allPrice() {
			return this.combination.length?(this.combination[0].combinationSkuBos[0].price + this.combination[0].combinationSkuBos[1].price) / 100:'';
		},
		// 推荐组合价格
		imgUrl() {
			return 'https://img.jianke.com/suo/';
		}
	}

};
</script>

<style lang="scss" scoped>
.searchDetailContainer {
	width: 100%;
	// height: 1185rpx;
	background-color: #ededed;
	border-radius: 10rpx;
	.input {
		background: white;
		width: 700rpx;
		margin-top: 20rpx;
		background: #ededed;
		height: 60rpx;
		margin: 0 auto;
		position: relative;
		display: flex;
		justify-content: space-between;
		input {
			width: 380rpx;
			height: 60rpx;
			background: white;
			border-radius: 30rpx;
			position: absolute;
			left: 0;
			top: 16rpx;
			padding: 0 90rpx;
		}
		image {
			width: 30rpx;
			height: 30rpx;
			position: absolute;
			left: 50rpx;
			top: 32rpx;
		}
		button {
			background-color: #28b2f9;
			position: absolute;
			right: 10rpx;
			top: 16rpx;
		}
	}
	.searchLogo {
		width: 100%;
		height: 100upx;
		margin-top: 40upx;
		background-color: #1298fa;
	}
	.goodsContainer {
		.goodsNav {
			width: 100%;
			height: 100upx;
			margin-bottom: 5upx;
			border-bottom: 1upx solid #ededed;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			text {
				width: 25%;
				line-height: 100upx;
				height: 100upx;
				text-align: center;
			}
			&.active {
				color: #1298fa;
			}
		}
		.goodsRecommended {
			position: relative;
			background-color: #ffffff;
			padding-bottom: 20upx;
			border-bottom: 1upx solid #ededed;
			font-size: 28upx;
			.grTitle {
				width: 100%;
				padding: 20upx;
			}
			.grBox {
				display: flex;
				margin-right: 30upx;
				padding-top: 30upx;
				.grBox_image {
					width: 160upx;
					height: 180upx;
					margin: 0 40upx;
					image {
						width: 140upx;
						height: 140upx;
						// border: 1upx solid #EDEDED;
					}
					.gri_name {
						overflow: hidden;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-line-clamp: 1;
						-webkit-box-orient: vertical;
					}
				}
				.grBox_price {
					display: flex;
					flex-direction: column;
					align-items: center;
					// background-color: #0BD68C;
					width: 180upx;
					height: 180upx;
					margin: 0 40upx;
					.grBox_price_title {
						margin: 20upx 0 10upx 0;
						font-size: 24upx;
					}
					.grBox_price_Num {
						font-size: 40upx;
						font-weight: 700;
						color: #dd524d;
						margin-bottom: 10upx;
					}
					.grBox_price_more {
						padding: 8upx 10upx;
						background-color: #dd524d;
						color: #fff;
						font-size: 26upx;
						border-radius: 44upx;
					}
				}
			}
			.grEvaluate {
				margin-top: 30upx;
				margin-left: 40upx;
				font-size: 24upx;
				text {
					color: #666;
				}
			}
		}
		.goodsItem {
			position: relative;
			display: flex;
			width: 100%;
			margin-bottom: 1upx solid #ededed;
			height: 270upx;
			.goodsItem_left {
				width: 220upx;
				image {
					margin-left: 40upx;
					margin-top: 20upx;
					width: 160upx;
					height: 160upx;
				}
				text {
					display: block;
					width: 160upx;
					margin: 20upx;
					padding: 6upx 20upx;
					color: #3fadff;
					font-size: 24upx;
					text-align: center;
					background-color: #dbf0ff;
				}
			}
			.goodsItem_right {
				flex: 1;
				display: flex;
				flex-direction: column;
				.gir_title {
					margin-top: 30upx;
					font-weight: 700;
					margin-bottom: 10upx;
				}
				.gir_text {
					width: 380upx;
					margin-bottom: 10upx;
					font-size: 28upx;
					color: #666;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
				.gir_price {
					font-weight: 700;
					color: #ff6e5d;
				}
			}
			.goodsItem_car {
				position: absolute;
				top: 40%;
				right: 20upx;
				padding: 10upx;
				width: 30upx;
				height: 30upx;
				border-radius: 50%;
				border: 2upx solid #666;
				image {
					width: 30upx;
					height: 30upx;
				}
			}
		}
	}
}
</style>

